import {useRef,useState} from 'react'
import * as THREE from 'three'
import bi from './images/bi.png' 
import sa from './images/sa.png' 
import di from './images/di.png' 
import cuang from './images/cuang.png' 
import men from './images/men.png' 
import Zjl from '../ping.module.css'

let App=({canvasRef,sceneRef,cameraRef,rendererRef})=>{
    let state=''
    
    let handleMouseClick =(event)=>{
        let scene =sceneRef.current
        let camera = cameraRef.current
        let renderer = rendererRef.current
        //鼠标点击位置转换
        let mouse =new THREE.Vector2(
            (event.clientX/renderer.domElement.clientWidth)*2-1,
            -((event.clientY-40)/renderer.domElement.clientHeight)*2+1
        )
        //纹理贴图对像
        const textureLoader = new THREE.TextureLoader();

        //创建Raycaster
        let raycaster =new THREE.Raycaster()
        raycaster.setFromCamera(mouse,camera)//从相机和鼠标位置设置射线
        
        let geometry =new THREE.BoxGeometry(20,20,20)//几何大小
        geometry.translate(geometry.parameters.width/2,geometry.parameters.height/2,geometry.parameters.depth/2)
        console.log(state);
        let material =null
        let texture =null
        let cube =null
        if(state=='qiang'){
            material =new THREE.MeshBasicMaterial({
                color:0xaaaaaa
            })
            cube =new THREE.Mesh(geometry,material)
            cube.scale.y=10
        }else if(state=='bing'){
            texture = textureLoader.load(bi);
            material =new THREE.MeshBasicMaterial({
                // color:0xaaaaaa,
                map:texture
            })
            cube =new THREE.Mesh(geometry,material)
            cube.scale.y=8
        }else if(state=='sha'){
            texture = textureLoader.load(sa);
            material =new THREE.MeshBasicMaterial({
                // color:0xaaaaaa,
                map:texture
            })
            cube =new THREE.Mesh(geometry,material)
            cube.scale.y=3
        }
        else if(state=='di'){
            texture = textureLoader.load(di);
            material =new THREE.MeshBasicMaterial({
                // color:0xaaaaaa,
                map:texture
            })
            cube =new THREE.Mesh(geometry,material)

        }else if(state=='cuang'){
            texture = textureLoader.load(cuang);
            material =new THREE.MeshBasicMaterial({
                // color:0xaaaaaa,
                map:texture
            })
            cube =new THREE.Mesh(geometry,material)
            cube.scale.y=3
            cube.scale.x=1.5
        }else if(state=='men'){
            texture = textureLoader.load(men);
            material =new THREE.MeshBasicMaterial({
                // color:0xaaaaaa
                map:texture
            })
            cube =new THREE.Mesh(geometry,material)
            cube.scale.y=10
        }
        //计算立方体的位子
        let positionXYZ=new THREE.Vector3()
        if(state=='di'){
            raycaster.ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0,1,0),20),positionXYZ)
        }else if(state=='cuang'){
            raycaster.ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0,1,0),-100),positionXYZ)
        }else{
            raycaster.ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0,1,0),0),positionXYZ)
        }
        cube.position.copy(positionXYZ)
        
        scene.add(cube)
        
        
        canvasRef.current.children[0].removeEventListener('click', handleMouseClick);
    }
    let draw=(val)=>{
        state=val
        canvasRef.current.children[0].addEventListener('click', handleMouseClick);
    }
    
    return (
        <>
        <div style={{display:'flex',flexWrap:'wrap'}}>
            <h4 onClick={()=>draw('qiang')} className={`${Zjl.h4}`}>墙体</h4>
            <h4 onClick={()=>draw('bing')} className={`${Zjl.h4}`}>冰箱</h4>
            <h4 onClick={()=>draw('sha')} className={`${Zjl.h4}`}>沙发</h4>
            <h4 onClick={()=>draw('di')} className={`${Zjl.h4}`}>地砖</h4>
            <h4 onClick={()=>draw('cuang')} className={`${Zjl.h4}`}>窗户</h4>
            <h4 onClick={()=>draw('men')} className={`${Zjl.h4}`}>大门</h4>
        </div>
        </>
    )
}

export default App